<template>
  <el-container class="layout-container">
    <!-- 侧边栏和内容区域 -->
    <el-aside width="200px" class="side-container">
      <el-scrollbar>
        <el-menu
          :default-active="activeRoute"
          background-color="#fff"
          text-color="#767474"
          active-text-color="#409eff"
          unique-opened
          router
        >
          <template v-for="item in menuItems" :key="item.index">
            <el-menu-item v-if="!item.children" :index="item.index">
              <template #title>{{ item.title }}</template>
            </el-menu-item>
            <el-sub-menu v-else :index="item.index">
              <template #title>{{ item.title }}</template>
              <el-menu-item
                v-for="child in item.children"
                :key="child.index"
                :index="child.index"
              >
                <template #title>{{ child.title }}</template>
              </el-menu-item>
            </el-sub-menu>
          </template>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <!-- 内容区域 -->
    <el-main>
      <router-view />
    </el-main>
  </el-container>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { computed } from "vue";
import { MENU_ITEMS } from "@/utils/menu";

const router = useRouter();
const route = useRoute();

// 当前激活的路由
const activeRoute = computed(() => route.path);

// 菜单项
const menuItems = MENU_ITEMS;
</script>

<style lang="scss" scoped>
// 定义变量
$primary-color: #409eff;
$text-color-primary: var(--el-text-color-primary);
$shadow-color: #00000080;
$white: #fff;
.layout-container {
  height: 100vh;
  .side-container {
    border-right: 1px solid #ebeef5;
  }
}
.el-menu-item {
  &.is-active {
    background-color: $primary-color;
    color: $white;
  }
}

.side_container {
  height: 100%;
}

:deep(.el-menu) {
  border-right: 0px !important;
}
</style>
